<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>vue数据代理2</title>
</head>
<body>
    <div id="root">
        <h2>学校名称: {{name}}</h2>
        <h2>学校地址: {{address}}</h2>
        <button @click="demo($event)">按钮</button>
        <input type="text" @change="demo2($event)">
    </div>

    <script>
        Vue.config.productionTip = false;

    // 通过vm对象来代理data对象中属性的操作(读/写)
    // Vue中数据代理的好处:
    //    更加方便操作data中的数据
    // 基本原理:
    //    通过Object.defineProperty()把data对象中的所有属性添加到vm上。
    //    为每一个添加到vm上的属性,都指定一个getter/setter.
    //    在getter/setter内部去操作(读/写)data中对应的属性。

     const vm  =  new Vue({
        el: '#root',
        data: {
        name:'尚硅谷',
        address:'科技园'
        },
        methods:{
        demo(event){
            console.log('event',event.target.value);
            
        },
        demo2(event){
            console.log('event',event.target.value);
        }
        }
        })

        console.log('vm',vm);
        
    </script>
</body>
</html>